import React, { useEffect, useState } from 'react';
import { ResponsiveGrid, Pagination, Loading, Button, Dialog, Form, Input, Message } from '@alifd/next';
import { Table, Popconfirm } from 'antd';
import styles from './index.module.scss';
import { logger } from 'ice';
import { useEffectOnce } from 'react-use';
import { getAdminUsersList, editAdminUser, removeAdminUser } from './service';
import { useRequest } from 'ahooks';

const { Cell } = ResponsiveGrid;
const FormItem = Form.Item;
const formItemLayout = {
  labelCol: {
    fixedSpan: 6,
  },
  wrapperCol: {
    span: 18,
  },
};

const AdminUsersList = () => {
  const { data, error, loading, run } = useRequest(getAdminUsersList);
  const [editDialog, setEditDialog] = useState(false);
  const [editValue, setEditValue] = useState<{ _id: string; userName: string; password: string }>(); // 编辑弹框的value
  const [editId, setEditId] = useState(''); // 编辑弹框的value
  if (error) {
    logger.trace(error);
  }
  if (loading) {
    return (
      <ResponsiveGrid gap={20}>
        <Cell colSpan={12}>
          <div className={styles.container}>
            <div className={styles.title}>管理员列表</div>
            <div className={styles.loading}>
              <Loading></Loading>
            </div>
          </div>
        </Cell>
      </ResponsiveGrid>
    );
  }
  return (
    <div>
      <ResponsiveGrid gap={20}>
        <Cell colSpan={12}>
          <div className={styles.container}>
            <div className={styles.title}>管理员列表</div>
            <Dialog
              title="编辑分类"
              visible={editDialog}
              height="250px"
              footer={false}
              onClose={() => {
                setEditDialog(false);
              }}
            >
              <div className={styles.editDialog}>
                <Form style={{ width: '60%', marginLeft: 30 }} {...formItemLayout} colon>
                  <FormItem
                    label="管理员名称"
                    required
                    requiredMessage="请输入管理员名称"
                    size="large"
                    labelTextAlign="left"
                  >
                    <Input name="userName" defaultValue={editValue?.userName} />
                  </FormItem>
                  <FormItem
                    label="管理员密码"
                    required
                    requiredMessage="请输入管理员密码"
                    size="large"
                    labelTextAlign="left"
                  >
                    <Input name="password" defaultValue={editValue?.password} />
                  </FormItem>
                  <FormItem label=" " colon={false} size="medium">
                    <Form.Submit
                      type="primary"
                      validate
                      onClick={(values) => {
                        logger.log(values);
                        editAdminUser({...values,id:editId})
                          .then((res) => {
                            Message.success({
                              content: '修改管理员成功',
                            });
                          })
                          .then(() => {
                            run();
                            setEditDialog(false);
                          });
                      }}
                      style={{ marginRight: 8 }}
                    >
                      提交
                    </Form.Submit>
                  </FormItem>
                </Form>
              </div>
            </Dialog>
            <div className={styles.tableBody}>
              <Table dataSource={data} rowKey={(record) => record._id}>
                <Table.Column title="Id" dataIndex="_id" />
                <Table.Column title="userName" dataIndex="userName" />
                <Table.Column
                  dataIndex="_id"
                  title="Operate"
                  render={(text, record: { userName: string; _id: string; password: string }, index) => {
                    return (
                      <>
                        <div className={styles.operate}>
                          <Button
                            type="primary"
                            className={styles.btn}
                            onClick={() => {
                              setEditDialog(true);
                              setEditValue(record);
                              setEditId(record._id);
                            }}
                          >
                            编辑
                          </Button>
                          <Popconfirm
                            title={`确定要删除${' '}${record.userName}${' '}管理员吗？`}
                            onConfirm={() => {
                              removeAdminUser(record._id)
                                .then(() => {
                                  Message.success({
                                    content: '删除管理员成功',
                                  });
                                })
                                .then(() => {
                                  run();
                                })
                                .catch((err) => logger.trace(err));
                            }}
                            onCancel={(e) => {
                              logger.log(e);
                            }}
                            okText="确定"
                            cancelText="取消"
                          >
                            <Button type="primary" style={{ backgroundColor: 'rgb(238, 45, 45)' }}>
                              删除
                            </Button>
                          </Popconfirm>
                        </div>
                      </>
                    );
                  }}
                />
              </Table>
            </div>
          </div>
        </Cell>
      </ResponsiveGrid>
    </div>
  );
};

export default AdminUsersList;
